<template>
  <div>
    <slot></slot>
    <div class="loading" v-show="value">加载中</div>
    <div class="finish" v-show="finished">{{ finishedText }}</div>
  </div>
</template>

<script>
export default {
  props: ["finished", "finished-text", "value"],
  data() {
    return {};
  },
  methods: {
    emitLoad() {
      this.$emit("load");
    },
    debance(fn, delay) {
      let timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
          timer = setTimeout(fn, delay);
        } else {
          timer = setTimeout(fn, delay);
        }
      };
    },
  },
  async mounted() {
    this.emitLoad();
    window.addEventListener(
      "scroll",
      this.debance(() => {
        let scrollHeight = document.documentElement.scrollHeight;
        let scrollTop = document.documentElement.scrollTop;
        let inneerHeight = window.innerHeight;
        // console.log(scrollTop);
        if (scrollHeight - scrollTop - inneerHeight < 50) {
          this.emitLoad();
        }
      }, 250)
    );
  },
};
</script>
